<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="../vue.js" charset="utf-8"></script>
      </head>
      <body>
        <div id="demo">
            num: {{num}}<br/>
            string: {{string}}<br/>
            arr: {{arr}}<br/>
            obj: {{obj}}<br/>
            <c1 :items="arr" @input="cb"></c1>
        </div>
        <script type="text/x-vue-template" id="c1">
        <div>
            <p @click="save"> save  </p>
            <ul >
                <li v-for="item in items">
                    <h1>{{item}}</h1>
                </li>
            </ul>
        </div>
        </script>
      </body>
      <script type="text/javascript">
        var data= {a:{}},val ;

        Vue.component('c1',{
            props:['items'],
            template:"#c1",
            methods: {
                save(){
                    this.$emit('input',[1,2])
                }
            }
        });

        var vm = new Vue({
            el:"#demo",
            watch: {
                test1(){
                    console.log('test1 changed');
                }
            },
            created () {
              this.test1 = 1;
              var that = this;
            },
            data:{
                num:1,
                string:'afsd',
                arr : [],
                obj: {}
            },
            methods:{
                cb(val){
                    console.log(val);
                    this.$set(this.arr, 0, val);
                }
            }
        });
      </script>
</html>